<ion-header class="forget-header">
  <ion-navbar hideBackButton="true">

    <ion-buttons start navPop class="back-buttons">
      <button ion-button clear></button>
    </ion-buttons>


    <ion-title float-left>找回密码</ion-title>
  </ion-navbar>
</ion-header>


<ion-content class="forget-section">
  <form #telephoneRef="ngForm">
    <ion-item>
      <!-- pattern="\\d{11,11}"-->
      <input [(ngModel)]="forget.username"
             type="text"
             name="username"
             #telephoneRef="ngModel"
             placeholder="请输入手机号"
             maxlength="11"
             required
      >
      <span *ngIf="forget.username.length>0"
            class="clear-button"
            (click)="clearUserName()"
      ></span>

    </ion-item>
    <ion-item>
      <input [(ngModel)]="forget.msgCode"
             type="text"
             name="msg_code"
             class="msg-code-input"
             #telephoneRef="ngModel"
             placeholder="请输入验证码"
             maxlength="6"
             required
      >

      <button ion-button
              clear
              (click)="executeGetAgain()"
              [class.hasBorder]="!countdown>0"
              [disabled]="countdown>0"
      >发送</button>

      <span class="show-time"
            *ngIf="countdown>0"
      >{{countdown}}s</span>

      <span *ngIf="forget.msgCode.length>0"
            class="clear-button"
            (click)="clearMsgCode()"
      ></span>

    </ion-item>
    <ion-item>
      <input [(ngModel)]="forget.password"
             name="password"
             [type]="switchover.type"
             #telephoneRef="ngModel"
             placeholder="请输入密码"
             maxlength="11"
             required
      >
      <span *ngIf="forget.password.length>0"
            class="show-pwd"
            [class.unvisible]="switchover.status"
            [class.visible]="!switchover.status"
            (click)="switchoverPassword(switchover)"
      ></span>

    </ion-item>

    <button ion-button
            [disabled]="!telephoneRef.valid"
            (click)="executeUpdatePassword()"
            block
    >确定</button>

  </form>

</ion-content>
